<template>
  <div
    style="min-height: 630px;background-color: rgba(255, 255, 255, 1);">
    <row>
      <div class="toolbar">
        <Button icon="ios-add" type="primary" @click="toAddPlugin" style="margin-right:30px"
                v-if="Validation.check(Resources.SOFTWARE_ADD)">新增插件
        </Button>
        <Input v-model="bloc.model.accountName" style="width:200px;margin-right:5px" placeholder="发布人"/>
        <Input v-model="bloc.model.versions" style="width:200px;margin-right:5px" placeholder="插件版本"/>
        <!--        <Select v-model="bloc.model.versions" style="width:200px;margin-right:5px" placeholder="插件版本"-->
        <!--                filterable-->
        <!--                remote-->
        <!--                :remote-method="() => bloc.getVersions()">-->
        <!--          <Option v-for="item in bloc.versions" :value="item.version" :key="item.index">{{ item.version }}</Option>-->
        <!--        </Select>-->
        <Select v-model="bloc.model.issueStatus" style="  width:200px;margin-right:5px" placeholder="发布状态"
                clearable>
          <Option v-for="(item,index) in publishStatusList" :value="index" :key="item">{{ item }}</Option>
        </Select>
        <Button icon="ios-search" type="primary" style="margin-right:5px"
                @click="bloc.getSoftware(bloc.software.pageIndex, bloc.software.pageSize, 'DESC',bloc.model)">查询
        </Button>
        <Button icon="ios-refresh" @click="reset">重置</Button>
      </div>
    </row>
    <div>
      <Table border ref="selection" :columns="columns4" :data="bloc.software.items">
        <template slot-scope="{ row }" slot="created">
          <span>{{$moment(row.updated).format('YYYY-MM-DD HH:MM:SS')}}</span>
        </template>
        <template slot-scope="{ row }" slot="updated">
          <span>{{$moment(row.created).format('YYYY-MM-DD HH:MM:SS')}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button size="small" @click="toModifyItem(row.id)"
                    type="info" v-if="Validation.check(Resources.SOFTWARE_UPDATE)">
              编辑
            </Button>
            <Button size="small" @click="toRemoveItem(row)"
                    type="warning" v-if="Validation.check(Resources.SOFTWARE_DELETE)">
              删除
            </Button>
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.software.itemCount"
            :current="bloc.software.pageIndex"
            :page-size="bloc.software.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="val=>bloc.getSoftware(val, bloc.software.pageSize,'DESC', bloc.model)"
            @on-page-size-change="val=>{bloc.software.pageSize = val;bloc.getSoftware(1, val,'DESC', bloc.model)}"
          />
        </slot>
      </Table>
    </div>

    <Modal
      title="确认提示"
      v-model="deleteConfirm"
      class-name="vertical-center-modal"
      @on-ok="removeItem(row)"
    >
      <div>
        <span>
          <h2>
            <Icon type="ios-help-circle-outline" size="48" color="rgba(255, 209, 145, 1)"/>是否确定删除对应的记录
          </h2>
        </span>
        <p style="margin-left:45px;">是否确定删除对应的记录</p>
      </div>
    </Modal>
  </div>
</template>
<script lang="ts">
  import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
  import {SoftwareBloc} from './PluginBloc';
  import {SeftMotion} from '@/base/model/SeftMotion';
  import {Validation} from '@/base/Validation';
  import {Resources} from '@/base/Resources';
  import {formatDate} from '@/base/util/Dates';

  @Component({
    components: {}
  })
  export default class extends Vue {
    @Prop({type: Number})
    readonly init!: number;
    Validation = Validation
    Resources = Resources
    bloc = new SoftwareBloc();
    deleteConfirm: boolean = false;
    publishStatusList: any = {
      NOT_ISSUE: '未发布',
      ISSUE: '已发布'
    };
    columns4: any = [
      {
        type: 'selection',
        width: 60,
        align: 'left',
        tooltip: true
      },
      // {
      //   title: 'ID',
      //   key: 'id'
      // },
      {
        title: '产品类型',
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: params.row.productType==1?'VR眼镜':'iRest云'
            }
          });
        },
        tooltip: true
      },
      {
        title: '插件版本',
        key: 'versions',
        tooltip: true
      },
      {
        title: '对应固件',
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: this.bloc.getFirmWareName(params.row.firmwareId)
            }
          });
        },
        align: 'left',
        minWidth: 150,
        tooltip: true
      },
      {
        title: '发布人',
        key: 'accountName',
        tooltip: true
      },
      // {
      //   title: '已升级',
      //   key: 'area'
      // },
      {
        title: '发布状态',
        key: 'issueStatus',
        render: (h: any, params: any) => {
          return h('div', [
            h(
              'i-switch',
              {
                props: {
                  type: 'primary',
                  size: 'small',
                  title: '状态',
                  // disabled:(!params.row.status),
                  value: params.row.issueStatus === 'ISSUE',
                  'ISSUE': 1,
                  'NOT_ISSUE': 0
                },
                style: {
                  marginRight: '2px',
                  display: params.row.issueStatus === undefined ? 'none' : ''
                },
                on: {
                  'on-change': value => {
                    this.switchStatus(params.row.id, value, params.index);
                  }
                }
              },
              'selected'
            )
          ]);
        },
        tooltip: true,
        width: 80
      },
      {
        title: '更新时间',
        key: 'updated',
        slot: 'updated',
        tooltip: true,
        width: 160,
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: formatDate(new Date(params.row.updated), 'yyyy-MM-dd hh:mm:ss')
            }
          });
        }
      },
      {
        title: '添加时间',
        key: 'created',
        slot: 'created',
        width: 160,
        tooltip: true,
        render: (h: any, params: any) => {
          return h('span', {
            domProps: {
              innerText: formatDate(new Date(params.row.created), 'yyyy-MM-dd hh:mm:ss')
            }
          });
        },
      },
      {
        title: '操作',
        key: 'action',
        width: (47 * 2) + (61 * 0) + (75 * 0) + 20,
        align: 'left',
        slot: 'action',
        fixed: 'right'
      }
    ];

    private row: any;

    switchStatus(id, value, index) {
      this.bloc.toModifyItem(id)
        .then(res => {
          if (value) {
            this.bloc.softwareId.issueStatus = 'ISSUE'
          } else {
            this.bloc.softwareId.issueStatus = 'NOT_ISSUE'
          }
          this.bloc.modifyItem(this.bloc.softwareId.describe, this.bloc.softwareId.id, this.bloc.softwareId.issueStatus,
            this.bloc.softwareId.modelId, this.bloc.softwareId.sortId, this.bloc.softwareId.url, this.bloc.softwareId.productType)
        })
    }

    toAddPlugin() {
      this.$router.push({
        path: '/device/nav/add/plugin',
        query: {id: this.$route.params.id, sortId: this.$route.query.sortId}
      });
    }

    toModifyItem(id) {
      this.$router.push({
        path: '/device/nav/edit/plugin/' + id,
        query: {id: this.$route.params.id, sortId: this.$route.query.sortId}
      });
    }

    toRemoveItem(row) {
      // this.deleteConfirm = true;
      this.row = row
      this.$Modal.confirm({
        title: '提示',
        content: '确认删除后将无法恢复！还要继续吗？',
        okText: '删除',
        cancelText: '取消',
        onOk: () => {
          this.bloc.removeItem(row)
            .then((res) => {
              if (res.name === '') {
                this.$Message.success('插件删除成功');
              } else {
                this.$Message.error('插件删除失败');
              }
            })
        }
      });
    }

    removeItem(row) {

    }

    @Watch('edit')
    nameChanged(newVal: string, oldVal: string) {
    }

    handleSelectAll(status) {
      let el: any = this.$refs.selection;
      el.selectAll(status);
    }

    reset() {
      this.bloc.model = {
        accountName: '',
        describe: '',
        modelId: this.bloc.model.modelId,
        sortId: 0,
        url: '',
        versions: undefined,
        issueStatus: ''
      };
      this.bloc.getSoftware(this.bloc.software.pageIndex, this.bloc.software.pageSize, 'DESC', this.bloc.model)
    }

    activated() {
      this.bloc.model.modelId = Number(this.$route.params.id)
      this.bloc.getSoftware(this.bloc.software.pageIndex, this.bloc.software.pageSize, 'DESC', this.bloc.model)
      this.bloc.getVersions()
    }

    beforeRouteUpdate(to: any, from: any, next: any) {
      if (to.params.id) {
        // this.isALL = false;
        this.bloc.model.modelId = to.params.id;
        this.bloc.getSoftware(this.bloc.software.pageIndex, this.bloc.software.pageSize, 'DESC', this.bloc.model)
      }
      next();
    }
  }
</script>
<style lang="less" scoped>
</style>
